<template>
  <div class="temperature">
    <bmchart :options="$format(chart)" :style="{ height: height }" @finish="finish"></bmchart>
  </div>
</template>
<script>
import { getCache } from '@/util/storageUtils'
import { CTCE_SBID } from '@/config/storageTypes'
import Utils from 'weex-ui/packages/utils'
import event from '@/net/event'
const erosConfig = weex.config.eros
const chartHeight = Utils.env.getScreenHeight() - parseFloat(erosConfig.navBarHeight) - parseFloat(erosConfig.statusBarHeight) - 65

export default {
  name: 'temperature',
  data () {
    return {
      sb_id: '',
      chart: {},
      height: chartHeight
    }
  },
  beforeCreate () {
    this.$notice.loading.show()
  },
  methods: {
    loadData () {
      event.getChart(this.sb_id).then(res => {
        const data = res.data.datalist
        let time = []
        let backWater = []
        let waterOutlet = []
        let indoor = []
        let outdoor = []
        data.forEach(value => {
          time.push(value.CJSJ)
          backWater.push(value.JSWD)
          waterOutlet.push(value.CSWD)
          indoor.push(value.SNWD)
          outdoor.push(value.SWWD)
        })
        this.chart = {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['回水温度', '出水温度', '室内温度', '室外温度']
          },
          grid: {
              left: '8.5%',
              right: '8.5%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: time
          },
          yAxis: {
              type: 'value'
          },
          series: [
            {
              name: '回水温度',
              type: 'line',
              data: backWater,
              smooth: true
            },
            {
              name: '出水温度',
              type: 'line',
              data: waterOutlet,
              smooth: true
            },
            {
              name: '室内温度',
              type: 'line',
              data: indoor,
              smooth: true
            },
            {
              name: '室外温度',
              type: 'line',
              data: outdoor,
              smooth: true
            }
          ]
        }
      })
    },
    finish () {
      this.$nextTick(() => {
        this.$notice.loading.hide()
      })
    }
  },
  created () {
    this.$navigator.setNavigationInfo({
        title: '温度曲线',
        navShow: true,
        statusBarStyle: 'LightContent'
    })
    getCache(CTCE_SBID).then(res => {
      this.sb_id = res
      this.loadData()
    })
  }
}
</script>
<style lang="scss" scoped>
  .temperature{
    width: 750px;
    margin-bottom: 64.6px;
    flex: 1;
  }
</style>   
